import React, { Component } from 'react'
// import PropTypes from 'prop-types'
import { Flex, InputItem, Button, Toast, List } from 'antd-mobile'
import { LoginStore } from 'store/loginStore'
import './msite.scss'

class Login extends Component {
  state = {
    mobile: '',
    vercode: '',
    msg: '验证',
    disabledSendBtn: false,
  };

  componentDidMount() {
    document.body.style.background = '#fff'
    stat({
      category: '登录页面',
      action: '登录页面pv',
    })
  }

  componentWillUnmount() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }

  login = () => {
    const mobileReg = /^1\d{10}$/
    const vercodeReg = /^\d{6}$/
    const { mobile, vercode } = this.state

    if (!mobileReg.test(mobile)) {
      Toast.info('手机号格式错误', 3)
      return
    }

    if (!vercodeReg.test(vercode)) {
      Toast.info('验证码格式错误', 3)
      return
    }

    LoginStore.login({
      mobile,
      code: vercode,
    })
    .then((data) => {
      window.localStorage.token = data.token
      stat({
        category: '登录页面',
        action: '注册成功',
        label: mobile,
      })
      Toast.info('登录成功', 1, () => {
        window.localStorage.mobile = mobile
        window.location.replace(window.sessionStorage.nextState)
      })
    })
    .catch((err) => {
      Toast.info(err.message)
      stat({
        category: '登录页面',
        action: '注册失败',
        label: err.message,
      })
    })
  };

  sendCode = () => {
    const mobileReg = /^1\d{10}$/
    const { mobile } = this.state

    if (!mobileReg.test(mobile)) {
      Toast.info('手机号格式错误', 3)
      return
    }

    LoginStore.sendCode(mobile)
    stat({
      category: '登录页面',
      action: '获取验证码',
      label: mobile,
    })

    this.countDown = 60
    this.timer = setInterval(() => {
      if (this.countDown <= 0) {
        this.setState({
          msg: '验证',
          disabledSendBtn: false,
        })
        clearInterval(this.timer)
      } else {
        const countDownStr = this.countDown < 10
          ? `0${this.countDown} s`
          : `${this.countDown} s`

        this.setState({
          msg: countDownStr,
          disabledSendBtn: true,
        })
        this.countDown -= 1
      }
    }, 1000)
  };

  mobileChange = (val) => {
    this.setState({ mobile: val })
  };

  vercodeChange = (val) => {
    this.setState({ vercode: val })
  };

  render() {
    const { mobile, vercode, msg, disabledSendBtn } = this.state

    return (
      <div style={{ height: `${window.winH}px` }} styleName="login">
        <Flex styleName="login-header" justify="center">
          <img src="http://placehold.it/200x200" alt="" />
        </Flex>
        <List styleName="login-form">
          <List.Item
            extra={
              <Button
                type="ghost"
                size="small"
                inline
                onClick={this.sendCode}
                disabled={disabledSendBtn}
              >
                {msg}
              </Button>
            }
          >
            <InputItem
              onChange={this.mobileChange}
              value={mobile}
              type="number"
              placeholder="请输入手机号"
            >
              手机
            </InputItem>
          </List.Item>
          <List.Item>
            <InputItem
              type="number"
              placeholder="请输入验证码"
              onChange={this.vercodeChange}
              value={vercode}
            >
              验证码
            </InputItem>
          </List.Item>
          <Button type="primary" styleName="login-btn" onClick={this.login}>
            登录
          </Button>
        </List>
      </div>
    )
  }
}

export default Login
